/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Row, Col, Divider, Carousel, Progress } from 'antd';
import style from './Cockpit.less';
import request from '../../utils/request';
//左边
import LeftTop from './Echarts/LeftTop';
import LeftCenter from './Echarts/LeftCenter';

//右边
import RightTop from './Echarts/RightTop';
import RightCenter from './Echarts/RightCenter';
//中间
import CenterR from './Echarts/CenterR';
import CenterL from './Echarts/CenterL';
const xc3 = require("../../assets/xc3.png")
const xc2 = require("../../assets/xc2.png")
const xc1 = require("../../assets/xc1.png")
const xc2tu = "/img/xc2.png"
const xc1tu = "/img/xc1.png"
const tup = require("../../assets/tup.png")
var player, player1
var markerClick, infoWindow, map, marker, circleMarker
class Cockpit extends Component {

    constructor(props) {
        super(props)
        this.state = {
            alarmNumber: 0,
            gasStationNum: 0,
            securityNumber: 0,
            groupSignId: '1',
            trap: [],
            center: ["114.31722", "30.553669"],
            sildeArr: [],
            name: "",
            phone: "",
            place: "",
            principal: "",
            nowValue: 0,
            allValue: 0,
            xlallValue: 0,
            xlnewValue: 0,
            videosrc: "http://t2168s3979.imwork.net:21473/zhrq-web/vedio/rqsp_1.mp4",
            videosrc1: "http://t2168s3979.imwork.net:21473/zhrq-web/vedio/rqsp_1.mp4"
        }

    }


    componentDidMount() {
        //搞得地图
        // this.initThree()
        //地图上方三数据
        this.getBasicsData()

        //获取实时库存数据 轮播区域
        this.getTimeInventoryData()

        //获取燃气站点经纬度
        this.getGasStationLongitudeLatitude()

        //获取标点详细信息
        this.getGasStationData()
        //库存风险管控
        this.getInventoryRiskData()
        //泄漏报警
        this.alarmHandle()

        //调取视频
        this.onvideo(1)


    }

    //调取视频
    onvideo = (i) => {

        console.log(123)
        var options = {
            autoplay: true,
            loop: true,
            // controls:true,
            src: this.state.videosrc,

        }
        player = videojs('my-player', options, function onPlayerReady() {
            this.on('mouseup', (e) => {//双击全屏
                if (this.clickTime) {
                    const dtime = new Date() - this.clickTime;
                    if (dtime < 500) {
                        if (!this.isFullscreen()) {
                            this.requestFullscreen();
                        } else {
                            this.exitFullscreen();
                        }
                        this.clickTime = null;
                    } else {
                        this.clickTime = new Date();
                    }

                } else {
                    this.clickTime = new Date();
                }
            });
        });

        player1 = videojs('my-player1', options, function onPlayerReady() {
            this.on('mouseup', (e) => {//双击全屏
                if (this.clickTime) {
                    const dtime = new Date() - this.clickTime;
                    if (dtime < 500) {
                        if (!this.isFullscreen()) {
                            this.requestFullscreen();
                        } else {
                            this.exitFullscreen();
                        }
                        this.clickTime = null;
                    } else {
                        this.clickTime = new Date();
                    }

                } else {
                    this.clickTime = new Date();
                }
            });
        });

        player.load()
        player1.load()


    }

    //泄漏报警
    alarmHandle = () => {
        request({
            url: `/zhrq-web/cockpit/common/alarmHandle`,
            method: 'GET',

        }).then(data => {
            // console.log(data)
            if (data.rc == 0) {
                this.setState({
                    xlallValue: data.ret.allValue,
                    xlnewValue: data.ret.newValue,
                })

            }
        })
    }

    //库存风险管控
    getInventoryRiskData = () => {
        request({
            url: `/zhrq-web/cockpit/common/getInventoryRiskData`,
            method: 'GET',

        }).then(data => {
            // console.log(data)
            if (data.rc == 0) {
                this.setState({
                    allValue: data.ret.allValue,
                    nowValue: data.ret.nowValue,
                })
            }
        })
    }

    //搞得地图
    initThree = (str, v) => {
        console.log(str, v)
        map = new AMap.Map('container', {
            mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
            zoom: 12
        });
        map.setMapStyle('amap://styles/darkblue');
        infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });

        // for (var i = 0; i < str.length; i++) {

        //     if(str[i].id === v) {
        //         marker = new AMap.Marker({
        //             position: str[i].LongitudeLatitude,
        //             icon: xc1tu,
        //             map:map,

        //         });
        //     } else {
        //         marker = new AMap.Marker({
        //             position: str[i].LongitudeLatitude,
        //             icon: xc2tu,
        //             map:map
        //         });
        //     }
        //     marker.content = `<div>
        //     ${str[i].name}
        //     </div>`
        //     marker.on('click', this.markerClick.bind(this, str[i],marker));

        // }







        for (var i = 0; i < str.length; i++) {
            var center = str[i].LongitudeLatitude;
            if (str[i].id === v) {
                console.log(str[i].id, v)
                circleMarker = new AMap.CircleMarker({
                    center: center,
                    map: map,
                    radius: 6,//3D视图下，CircleMarker半径不要超过64px
                    strokeColor: `rgba(244, 232, 65, 1)`,
                    strokeWeight: 10,
                    strokeOpacity: 0.8,
                    fillColor: 'rgba(244, 232, 65, 1)',
                    fillOpacity: 1,
                    zIndex: 10,
                    bubble: true,
                    cursor: 'pointer',
                    clickable: true
                })

            } else {
                circleMarker = new AMap.CircleMarker({
                    center: center,
                    map: map,
                    radius: 6,//3D视图下，CircleMarker半径不要超过64px
                    strokeColor: `RGBA(102, 207, 254, 0.6)`,
                    strokeWeight: 10,
                    strokeOpacity: 0.8,
                    fillColor: 'RGBA(102, 207, 254, 1)',
                    fillOpacity: 1,
                    zIndex: 10,
                    bubble: true,
                    cursor: 'pointer',
                    clickable: true
                })
            }

            circleMarker.on('click', this.markerClick.bind(this, str[i], marker));

            // circleMarker.setMap(map)
        }






    }
    //点击地图标点
    markerClick = (e, v, marker) => {
        console.log(e, v, marker, infoWindow)
        map.clearMap(v);
        this.setState({
            groupSignId: e.id,
            videosrc: `http://t2168s3979.imwork.net:21473/zhrq-web/vedio/rqsp_${Math.ceil(Math.random() * 1000000000 % 9)}.mp4`,
            videosrc1: `http://t2168s3979.imwork.net:21473/zhrq-web/vedio/rqsp_${Math.ceil(Math.random() * 1000000000 % 9)}.mp4`
        })

        setTimeout(() => {
            // this.initThree(this.state.trap,e.id)
            let str = this.state.trap
            this.getGasStationData()
            // this.onvideo()
            // document.getElementById("my-player").src="http://t2168s3979.imwork.net:21473/zhrq-web/vedio/rqsp_5.mp4";
            //  document.getElementById("my-player").play();
            //     console.log(document.getElementById("my-player").src)
            // console.log(player)
            //    console.log(player)
            //   player.sources.src = "http://t2168s3979.imwork.net:21473/zhrq-web/vedio/rqsp_5.mp4"
            //    player.cache_.src = "http://t2168s3979.imwork.net:21473/zhrq-web/vedio/rqsp_5.mp4"
            player.load()
            player1.load()

            // infoWindow.setContent(marker.target.content);
            // infoWindow.open(map, marker.target.getPosition());

            for (var i = 0; i < str.length; i++) {
                var center = str[i].LongitudeLatitude;

                if (str[i].id === e.id) {
                    circleMarker = new AMap.CircleMarker({
                        center: center,
                        map: map,
                        radius: 6,//3D视图下，CircleMarker半径不要超过64px
                        strokeColor: `rgba(244, 232, 65, 1)`,
                        strokeWeight: 10,
                        strokeOpacity: 0.8,
                        fillColor: 'rgba(244, 232, 65, 1)',
                        fillOpacity: 1,
                        zIndex: 10,
                        bubble: true,
                        cursor: 'pointer',
                        clickable: true
                    })

                } else {
                    circleMarker = new AMap.CircleMarker({
                        center: center,
                        map: map,
                        radius: 6,//3D视图下，CircleMarker半径不要超过64px
                        strokeColor: `RGBA(102, 207, 254, 0.6)`,
                        strokeWeight: 10,
                        strokeOpacity: 0.8,
                        fillColor: 'RGBA(102, 207, 254, 1)',
                        fillOpacity: 1,
                        zIndex: 10,
                        bubble: true,
                        cursor: 'pointer',
                        clickable: true
                    })
                }
                circleMarker.on('click', this.markerClick.bind(this, str[i], marker));

            }
        });
    }

    //地图三数据
    getBasicsData = () => {
        request({
            url: `/zhrq-web/cockpit/common/getBasicsData`,
            method: 'GET',

        }).then(data => {
            // console.log(data)
            if (data.rc == 0) {
                this.setState({
                    alarmNumber: data.ret.alarmNumber,
                    gasStationNum: data.ret.gasStationNum,
                    securityNumber: data.ret.securityNumber,
                })
            }
        })
    }
    //轮播图区域
    getTimeInventoryData = () => {
        request({
            url: `/zhrq-web/cockpit/common/getTimeInventoryData`,
            method: 'GET',

        }).then(data => {
            // console.log(data)
            if (data.rc == 0) {
                this.setState({
                    sildeArr: data.ret.resultList
                })
            }
        })
    }
    //经纬度
    getGasStationLongitudeLatitude = () => {
        request({
            url: `/zhrq-web/cockpit/common/getGasStationLongitudeLatitude`,
            method: 'GET',

        }).then(data => {
            // console.log(data)
            if (data.rc == 0) {
                this.setState({
                    trap: data.ret.resultList,
                    center: data.ret.centralPoint
                })
                this.initThree(data.ret.resultList, data.ret.resultList[4].id)
            }
        })
    }

    //获取标点详细信息
    getGasStationData = () => {
        request({
            url: `/zhrq-web/cockpit/common/getGasStationData`,
            method: 'POST',
            data: { groupSignId: this.state.groupSignId }
        }).then(data => {
            // console.log(data)
            if (data.rc == 0) {
                this.setState({
                    name: data.ret.name,
                    phone: data.ret.phone,
                    place: data.ret.place,
                    principal: data.ret.principal
                })
            }
        })
    }

    //进入系统按钮
    into = () => {
        this.props.history.push('/GasStationCall');
    }

    //点击更多
    onmore = (v) => {
        // console.log(v)
        if (v === 'xl') {
            this.props.history.push('/BlabVideo');
        } else if (v === "kc") {
            this.props.history.push('/RepControl');
        }
    }

    qpimg = () => {
        console.log(214)
        var ele = document.documentElement;
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
            this.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
        } else if (ele.webkitRequestFullScreen) {
            ele.webkitRequestFullScreen();
        }

    }

    //快速通道
    oncie = (a) => {
        this.props.history.push(`/${a}`);
    }
    render() {
        const { sildeArr } = this.state
        return (
            <div className={style.wrap}>
                <div className={style.boxL}>
                    <div className={style.boxL_t}>
                        <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900 }}>钢瓶库存统计</p>
                        <LeftTop />
                    </div>

                    <div className={style.boxL_b}>
                        <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900 }}>库存风险管控<span style={{ float: "right", marginRight: "5%", cursor: "pointer", fontSize: 12 }} onClick={this.onmore.bind(this, "kc")}>更多<img style={{ width: 10, verticalAlign: "unset" }} src={require("../../assets/xy.svg")} /></span></p>

                        <div className={style.LeftCenter}>
                            <LeftCenter />
                            <div style={{ width: "50%", float: "right", height: '100%' }}>
                                <div className={style.CenterLeft}>
                                    <p>{this.state.nowValue}<span style={{ color: "#3A95C8" }}>/{this.state.allValue} <sub>瓶</sub></span></p>
                                    <p style={{ color: "#3A95C8", fontSize: 12 }}>库存占比</p>
                                    <p style={{ width: "120%", height: 1, backgroundColor: "#122742" }}></p>
                                    <p style={{ color: "#3A95C8", fontSize: 12 }}>风险等级</p>
                                    <p>安全</p>
                                </div>
                            </div>

                        </div>

                        <div className={style.LeftCC}>
                            <Row style={{ textAlign: "center", color: "#fff", fontSize: 10, paddingTop: "0.5%", fontFamily: "wd", fontWeight: 900 }}>
                                <Col span={4} style={{ fontFamily: "wd", fontWeight: 900 }}>序号</Col>
                                <Col span={6} style={{ fontFamily: "wd", fontWeight: 900 }}>站点名称</Col>
                                <Col span={8} style={{ fontFamily: "wd", fontWeight: 900 }}>实时库存/库容</Col>
                                <Col span={6} style={{ fontFamily: "wd", fontWeight: 900 }}>库存占比</Col>
                            </Row>
                        </div>
                        <div className={style.LeftBB}>
                            <Carousel dots={true} autoplay={true} style={{ width: "95%", height: "100%", color: "#70D7FF" }}>
                                {
                                    sildeArr.map((item, index) => {
                                        return (
                                            <div style={{ width: "95%", height: "100%", color: "#70D7FF" }} key={index}>
                                                {
                                                    item.map((item1, id) => {
                                                        return (
                                                            <div key={id}>
                                                                <div style={{ color: "#70D7FF" }} className={style.tableBox}>
                                                                    <Row style={{ textAlign: "center" }}>
                                                                        <Col span={4}>{item1.number}</Col>
                                                                        <Col span={6}>{item1.name}</Col>
                                                                        <Col span={8}>
                                                                            <div style={{ lineHeight: 1 }}>
                                                                                <p style={{ fontSize: 10 }}>{item1.inventoryTotal}/{item1.inventoryCapacity}</p>
                                                                                <Progress percent={item1.inventoryProportion} size="small" showInfo={false} />
                                                                            </div>

                                                                        </Col>
                                                                        <Col span={6} style={{ color: item1.inventoryProportion > 79 ? "#D0C047" : "#70D7FF" }}>{item1.inventoryProportion}%</Col>
                                                                    </Row>
                                                                </div>

                                                                <div className={style.line}></div>
                                                            </div>
                                                        )
                                                    })
                                                }



                                            </div>
                                        )
                                    })
                                }




                            </Carousel>
                        </div>
                    </div>
                </div>



                <div className={style.boxC}>
                    <div className={style.boxC_T_T}>
                        <div style={{ display: "flex", justifyContent: "space-around", marginTop: "1%" }}>
                            <div style={{ fontSize: 12, color: "#70D7FF", fontFamily: "wd", fontWeight: 900 }}>燃气站点</div>
                            <div className={style.line1}></div>
                            <div style={{ fontSize: 12, color: "#70D7FF", fontFamily: "wd", fontWeight: 900 }}>连续安全运行</div>
                            <div className={style.line1}></div>
                            <div style={{ fontSize: 12, color: "#70D7FF", fontFamily: "wd", fontWeight: 900 }}>当月报警</div>
                        </div>
                        <Row>
                            <Col span={6} style={{ textAlign: "center", color: "#FFF", fontSize: 10 }}><span style={{ fontFamily: "wd", fontWeight: 900, fontSize: 16 }}>{this.state.gasStationNum}</span>个</Col>
                            <Col span={2} ></Col>
                            <Col span={8} style={{ textAlign: "center", color: "#FFF", fontSize: 10 }}><span style={{ fontFamily: "wd", fontWeight: 900, fontSize: 16 }}>{this.state.securityNumber}</span>天</Col>
                            <Col span={2} ></Col>
                            <Col span={6} style={{ textAlign: "center", color: "#FFF", fontSize: 10 }}><span style={{ fontFamily: "wd", fontWeight: 900, fontSize: 16 }}>{this.state.alarmNumber}</span>次</Col>
                        </Row>
                    </div>
                    <div className={style.boxC_T} id="container">

                    </div>
                    <div className={style.boxC_C} >
                        {/* <div style={{ display: "flex", justifyContent: "space-around" }}>
                            <p style={{ fontSize: 12, color: "#70D7FF", textAlign: "center", width: "20%", fontFamily: "wd", fontWeight: 900, fontSize: 14 }}>【站点名称】</p>
                            <p style={{ fontSize: 12, color: "#70D7FF", textAlign: "center", width: "20%", fontFamily: "wd", fontWeight: 900, fontSize: 14 }}>【安全责任人】</p>
                            <p style={{ fontSize: 12, color: "#70D7FF", textAlign: "center", width: "20%", fontFamily: "wd", fontWeight: 900, fontSize: 14 }}>【联系方式】</p>
                            <p style={{ fontSize: 12, color: "#70D7FF", textAlign: "center", width: "20%", fontFamily: "wd", fontWeight: 900, fontSize: 14 }}>【站点地址】</p>
                        </div>
                        <div style={{ display: "flex", justifyContent: "space-around" }}>
                            <p style={{ fontSize: 12, color: "#fff", textAlign: "center", width: "20%" }}>{this.state.name}</p>
                            <p style={{ fontSize: 12, color: "#fff", textAlign: "center", width: "20%" }}>{this.state.principal}</p>
                            <p style={{ fontSize: 12, color: "#fff", textAlign: "center", width: "20%" }}>{this.state.phone}</p>
                            <p style={{ fontSize: 12, color: "#fff", textAlign: "center", width: "20%" }}>{this.state.place}</p>
                        </div> */}

                        <Row style={{ lineHeight: 2.5 }}>
                            <Col span={8} style={{ color: "#70D7FF", fontSize: 12 }}>【站点名称】 : <span style={{ color: "#fff", fontSize: 12 }}>{this.state.name}</span></Col>
                            <Col span={8} style={{ color: "#70D7FF", fontSize: 12 }}>【安全责任人】 : <span style={{ color: "#fff", fontSize: 12 }}>{this.state.principal}</span></Col>
                            <Col span={8} style={{ color: "#70D7FF", fontSize: 12 }}>【联系方式】 : <span style={{ color: "#fff", fontSize: 12 }}>{this.state.phone}</span></Col>
                        </Row>
                        <Row>
                            <Col span={8} style={{ color: "#70D7FF", fontSize: 12 }}>【站点地址】 : <span style={{ color: "#fff", fontSize: 12 }}>{this.state.place}</span></Col>

                            <Col span={16} style={{ color: "#70D7FF", fontSize: 12 }}>【燃气经营许可证期限】 : <span style={{ color: "#fff", fontSize: 12 }}>2018/12/13</span></Col>
                        </Row>
                    </div>
                    <div className={style.boxC_B}>
                        <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900, fontSize: 12 }}>燃气钢瓶<span style={{ float: "right", marginRight: "5%", fontFamily: "wd", fontWeight: 900, fontSize: 12 }}>运行报警</span></p>
                        <CenterL
                            id={this.state.groupSignId}
                        />
                        {/* <CenterR /> */}

                        <RightTop />
                    </div>
                </div>



                <div className={style.boxR}>
                    <div className={style.boxL_t} style={{ paddingLeft: "1%" }}>
                        <div className={style.dem} onClick={this.into}>进入系统</div>
                        <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900 }}>瓶库区监控 </p>
                        <video
                            id="my-player"
                            className="video-js vjs-default-skin vjs-big-play-centered"
                            controls={true}
                            preload="none"
                            muted="true"
                            src={this.state.videosrc}
                            style={{ width: "99%", height: "85%", objectFit: "fill", paddingLeft: "1%" }}
                        >
                        </video>
                    </div>

                    <div className={style.boxL_t}>
                        <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900, fontSize: 12 }}>工作区监控<span style={{ float: "right", marginRight: "5%", cursor: "pointer", fontSize: 12, fontFamily: "wd", fontWeight: 900 }} onClick={this.onmore.bind(this, 'xl')}>更多<img style={{ width: 10, verticalAlign: "unset" }} src={require("../../assets/xy.svg")} /></span></p>



                        <video
                            id="my-player1"
                            className="video-js vjs-default-skin vjs-big-play-centered"
                            controls={true}
                            preload="none"
                            muted="true"
                            src={this.state.videosrc1}
                            style={{ width: "99%", height: "85%", objectFit: "fill", paddingLeft: "1%" }}
                        >
                        </video>

                    </div>
                    <div className={style.kuaijie} style={{ height: "34%" }}>
                        <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900, fontSize: 12 }}>快捷通道</p>
                        <div className={style.box}>
                            <div className={style.item}>
                                <div className={style.cie} onClick={this.oncie.bind(this,'videoDay')}>
                                    <img src={require("../../assets/sp.png")} style={{ width:30 }} />
                                </div>
                                <div style={{color:"#66CFFE",fontSize:"12px"}}>视频管理</div>
                            </div>
                            <div className={style.itemLine}></div>
                            <div className={style.item}>
                                <div className={style.cie} onClick={this.oncie.bind(this,'Device')}>
                                    <img src={require("../../assets/bgicon.png")} style={{ width:30 }} />
                                </div>
                                <div style={{color:"#66CFFE",fontSize:"12px"}}>报警管理</div>
                            </div>
                            <div className={style.itemLine}></div>
                            <div className={style.item}>
                                <div className={style.cie} onClick={this.oncie.bind(this,'RepControl1')}>
                                    <img src={require("../../assets/kcicon.png")} style={{ width:30 }} />
                                </div>
                                <div style={{color:"#66CFFE",fontSize:"12px"}}>库存管理</div>
                            </div>
                           
                            <div className={style.item}>
                                <div className={style.cie} onClick={this.oncie.bind(this,'DataAnals')}>
                                    <img src={require("../../assets/sjicon.png")} style={{ width:30 }} />
                                </div>
                                <div style={{color:"#66CFFE",fontSize:"12px"}}>数据分析</div>
                            </div>
                            <div className={style.itemLine}></div>
                            <div className={style.item}>
                                <div className={style.cie} onClick={this.oncie.bind(this,'GasStationCall')}>
                                    <img src={require("../../assets/bbicon.png")} style={{ width:30 }} />
                                </div>
                                <div style={{color:"#66CFFE",fontSize:"12px"}}>报表管理</div>
                            </div>
                            <div className={style.itemLine}></div>
                            <div className={style.item}>
                                <div className={style.cie} onClick={this.oncie.bind(this,'Public')}>
                                    <img src={require("../../assets/shicon.png")} style={{ width:30 }} />
                                </div>
                                <div style={{color:"#66CFFE",fontSize:"12px"}}>社会舆情</div>
                            </div>
                           

                        </div>




                    </div>
                </div>

            </div>
        )
    }
}
export default (Cockpit);
